<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3饼图</title>
    <script type="text/javascript" src="../javascript/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="pie.css">
    <style type="text/css">
        body {
            padding: 20px;
        }
        
        .fork {
            position: fixed;
            right: 0;
            top: 0;
        }
        
        dl {
            clear: both;
        }
        
        dt {
            font-size: 30px;
            line-height: 1.5;
        }
        
        dd {
            margin-bottom: 20px;
            float: left;
        }
        
        .pie-wrap {
            width: 140px;
            height: 200px;
            float: left;
            margin: 10px;
            position: relative;
        }
        
        .pie-wrap p {
            position: absolute;
            top: 160px;
            width: 140px;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <a class="fork" href="https://github.com/lancer07/css3_pie" target="_blank">
        <img src="img/forkme.png" width="149" height="149" />
    </a>
    <dl>
        <dt>CSS3饼图</dt>
        <dd id="init-pie">
            <div class="pie-wrap">
                <div class="pie" id="base-pie" data-value="0.2"></div>
                <p>Base</p>
            </div>
            <div class="pie-wrap">
                <div class="pie" id="number-pie" data-value="0.95"></div>
                <p>Number</p>
            </div>
            <div class="pie-wrap">
                <div class="pie" id="animate-pie" data-value="0.4"></div>
                <p>Animate</p>
            </div>
            <div class="pie-wrap">
                <div class="pie" id="ring-pie" data-value="0.6"></div>
                <p>Ring</p>
            </div>
            <div class="pie-wrap">
                <div class="pie" id="colorful-pie" data-value="0.8"></div>
                <p>ColorFul</p>
            </div>
            <div class="pie-wrap">
                <div class="pie" id="rotate-pie" data-value="0.3"></div>
                <p>Rotate</p>
            </div>

        </dd>
    </dl>
</body>
<script type="text/javascript" src="pie.1.0.js"></script>

<!-- 初始化各种百分比的饼状图 -->
<script type="text/javascript">
    var pie1 = new Pie({
        el: '#base-pie',
        number: false //是否显示中间百分比
    });
    pie1.init();
    var pie1 = new Pie({
        el: '#number-pie'
    });
    pie1.init();
    var pie3 = new Pie({
        el: '#animate-pie',
        animite: true,
        number: false
    });
    pie3.init();
    var pie4 = new Pie({
        el: '#ring-pie',
        animite: true,
        ring: 0.5
    });
    pie4.init();
    var pie5 = new Pie({
        el: '#colorful-pie',
        animite: true,
        ring: 0.7,
        color: '#ff9933'
    });
    pie5.init();
    var pie6 = new Pie({
        el: '#rotate-pie',
        animite: true,
        ring: 0.8, //饼图中间是否要空心，并设置空心半径
        color: '#ff6699', //饼图颜色
        rotate: -40 //设置起点角度，默认从12点钟方向开始
    });
    pie6.init(); //实例化
</script>

</html>